<template>

    <div class="table-header">
        <el-button type="primary" @click="showAdd">添加</el-button>
        <div class="table-actions">
            <el-button :icon="Search" />
            <el-button :icon="Refresh" />
            <el-button :icon="Operation" />
            <el-button :icon="Expand" />
        </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="sourceDate" label="来源日期" />
        <el-table-column prop="orderDate" label="办单日期" />
        <el-table-column prop="source" label="来源" />
        <el-table-column prop="enterpriseNo" label="企业号" />
        <el-table-column prop="customerName" label="客户名称" />
        <el-table-column prop="customerPhone" label="客户手机号" />
        <el-table-column prop="status" label="工单状态" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" @click="showDetil(scope.row)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="->,total, sizes, prev, pager, next, jumper"
            :total="121" />
    </div>
    <Detil ref="detilRef" />
    <Add ref="addRef" />
</template>

<script setup>
import { ref, reactive } from 'vue';
import Detil from "../components/Detil.vue"
import Add from "../components/AddOrEdit.vue"
import * as ticketManagementApi from "@/api/ticketManagement/index"
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Refresh,
    Operation,
    Expand,
    Plus
} from '@element-plus/icons-vue'
const detilRef = ref(null)
const addRef = ref(null)
onMounted(() => {
    getList()
})
const getList = () => {
    ticketManagementApi.getWorkorder().then(res => {
        console.log("res", res);
    })
}
// 表格数据（模拟）
const tableData = ref([
    {
        id: '2508251303354880',
        sourceDate: '2025-08-24',
        orderDate: '2025-08-25',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '廖诗林',
        customerPhone: '19836604364',
        status: '已完成',
    },
    {
        id: '2508241135258634',
        sourceDate: '2025-08-23',
        orderDate: '2025-08-24',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '黄清洋',
        customerPhone: '18323630967',
        status: '已完成',
    },
    {
        id: '2508213135962299',
        sourceDate: '2025-08-21',
        orderDate: '2025-08-21',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '何俊龙',
        customerPhone: '13480685005',
        status: '已完成',
    },
    {
        id: '2508192010179669',
        sourceDate: '2025-08-19',
        orderDate: '2025-08-19',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '蒋沅宏',
        customerPhone: '18782119813',
        status: '已完成',
    },
    {
        id: '2508191448154911',
        sourceDate: '2025-08-19',
        orderDate: '2025-08-19',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '金亿',
        customerPhone: '18985920967',
        status: '已完成',
    },
    {
        id: '2508191053216539',
        sourceDate: '2025-08-18',
        orderDate: '2025-08-19',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '陈宇',
        customerPhone: '15607070515',
        status: '已完成',
    },
    {
        id: '2508161455282771',
        sourceDate: '2025-06-16',
        orderDate: '2025-08-16',
        source: '004',
        enterpriseNo: '张嘉欣',
        customerName: '王婷',
        customerPhone: '17787415819',
        status: '已完成',
    },
    {
        id: '2508151404532022',
        sourceDate: '2025-08-15',
        orderDate: '2025-08-15',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '曾翠翠',
        customerPhone: '15214532587',
        status: '已完成',
    },
    {
        id: '2508141941487501',
        sourceDate: '2025-08-14',
        orderDate: '2025-08-14',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '张露臻',
        customerPhone: '13408955553',
        status: '已完成',
    },
    {
        id: '2508141713587139',
        sourceDate: '2025-08-14',
        orderDate: '2025-08-14',
        source: '001',
        enterpriseNo: '张嘉欣',
        customerName: '杨艳菊',
        customerPhone: '19907883880',
        status: '已完成',
    },
]);
// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);

// 打开详情
const showDetil = (row) => {
    console.log("row", row);
    detilRef.value.onOpen(row)
}
// 打开详情
const showAdd = (row) => {
    addRef.value.onOpen(row)
}


const handleSizeChange = (val) => {
    pageSize.value = val;
};

const handleCurrentChange = (val) => {
    currentPage.value = val;
};
</script>
<style scoped lang="scss">
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.table-actions {
    display: flex;
}

.pagination {
    margin-top: 15px;
    text-align: right;
}
</style>